<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>EC Shape</title>
    <style>
        body{
            margin:0;
        }
        .movieclip{
            position: absolute;
            left:0;
            top:0;
            right:0;
            bottom: 0;
        }
    </style>
</head>

<body>

<canvas id="canvas-shape" class="movieclip"></canvas>

<!-- build:js scripts/libs/easyrender.js -->
<script src="scripts/Base.js"></script>
<script src="scripts/ES6-promise.pollyfill.js"></script>
<script src="scripts/Utils.js"></script>
<script src="scripts/Event.js"></script>
<script src="scripts/Loader.js"></script>
<script src="scripts/RequestAnimationFrame.js"></script>
<script src="scripts/Ticker.js"></script>
<script src="scripts/Timer.js"></script>
<script src="scripts/Easing.js"></script>
<script src="scripts/Tween.js"></script>
<script src="scripts/Renderer.js"></script>
<script src="scripts/MovieClip.js"></script>
<script src="scripts/TouchEvent.js"></script>
<script src="scripts/Stats.js"></script>
<!-- endbuild -->

<script>
    var canvas = document.getElementById('canvas-shape');
    var stage = new EC.Stage(canvas, {
        scaleMode: EC.isTouch ? 'showAll' : 'noScale',
        width: 750,
        height: 1334,
        showFps: true
    });

    stage.showFps({
        right: 0,
        left: "auto",
        top: 0
    });

    var roundRect = new EC.Shape();
    roundRect.stroke("#ff0000", 1); //color, alpha
    roundRect.fill('#06c', 1); //color, alpha
    roundRect.lineWidth = 2;
    roundRect.roundRect(10, 20, 400, 200, 20); //x, y, width, height, radius
    stage.addChild(roundRect);

    var line = new EC.Shape();
    line.stroke("#000");
    line.lineWidth = 2;
    line.line(10, 240, 410, 240); //x, y, endX, endY
    stage.addChild(line);

    var dashedLine = new EC.Shape();
    dashedLine.stroke("#000");
    dashedLine.lineWidth = 2;
    dashedLine.dashedLine(10, 260, 400, 260, 5); //x, y, endX, endY, dashedLength
    stage.addChild(dashedLine);

    var ellipse = new EC.Shape();
    ellipse.stroke("#f90");
    ellipse.lineWidth = 2;
    ellipse.ellipse(10, 300, 300, 150); //x, y, width, height
    stage.addChild(ellipse);

    var arc = new EC.Shape();
    arc.stroke("#cc0000");
    arc.arc(10, 470, 80, 0, 2, true); //x, y, radius, startAngle, endAngle, counterclockwise
    stage.addChild(arc);

    var dashArc = new EC.Shape();
    dashArc.dashLength = 5;
    dashArc.stroke("green");
    dashArc.arc(200, 470, 80, 0, 2, true); //x, y, radius, startAngle, endAngle, counterclockwise
    stage.addChild(dashArc);

    var arcTo = new EC.Shape();
    arcTo.stroke("#000");
    arcTo.x = 500;
    arcTo.y = 250;
    arcTo.moveTo(20,20);
    arcTo.arcTo(150, 20, 150, 70, 50); //x, y, endX, endY, radius
    stage.addChild(arcTo);

    var lineTo = new EC.Shape();
    lineTo.stroke("#f90");
    lineTo.moveTo(30, 780);
    lineTo.lineTo([50,850],[300,950],[600,600],[700,850]); //[x, y]
    stage.addChild(lineTo);

    var bezierCurveTo = new EC.Shape();
    bezierCurveTo.stroke("#000");
    bezierCurveTo.x = 500;
    bezierCurveTo.y = 20;
    bezierCurveTo.moveTo(20,20);
    bezierCurveTo.bezierCurveTo(20,100,200,100,200,20); //cp1x,cp1y,cp2x,cp2y,x,y
    stage.addChild(bezierCurveTo);

    var quadraticCurveTo = new EC.Shape();
    quadraticCurveTo.stroke("#000");
    quadraticCurveTo.x = 500;
    quadraticCurveTo.y = 150;
    quadraticCurveTo.moveTo(20,20);
    quadraticCurveTo.quadraticCurveTo(20,100,200,20); //cpx,cpy,x,y
    stage.addChild(quadraticCurveTo);

    var rect = new EC.Shape();
    rect.stroke("#f90");
    rect.rect(10, 650, 200, 100); //x, y, width, height
    stage.addChild(rect);
</script>
</body>
</html>